/* 引入字体 */
@import url("http://fonts.googleapis.com/css?family=Montserrat:200,300,400,500,600,700,800,900&display=swap");

*{
    margin: 0;
    padding: 0;
	 outline: none;
}
.ring{
	position: absolute;
    height: 80vh;
	top:20vh;
	left:50%;
    /* 弹性布局 水平+垂直居中 */
    display: flex;
    justify-content: center;
    align-items: center;
   /* background-color: #f9f7e8; */
    /* 溢出隐藏 */
    overflow: hidden;
    /* 禁止选取 */
    user-select: none;
	transition: 1s;
	transform: translate(-50%,-80vh);
	animation: drop 2s linear;
	animation-fill-mode :forwards;
	z-index: 1;
}
.circle{
    width: 50vh;
    height: 50vh;
   /* border-radius: 50%; */
    color: #55aaff;
    font-size: 6vh;
    font-weight: bold;
    /* 转大写 */
    text-transform: uppercase;
    /* 使用引入的字体 */
    font-family: 'Montserrat';
    text-align: center;
    /* 执行动画：动画名 时长 线性 无限次播放 */
    animation: spin 20s linear infinite;
	z-index: inherit;
}
.circle span{
    position: absolute;
    left: 0;
    top: 0;
    right: 0;
    bottom: 0;
}

/* 定义动画 */
@keyframes spin {
    0%{
        transform: rotate(360deg);
    }
    100%{
        transform: rotate(0);
    }
}

@keyframes drop {
    0%{
        transform: translate(-50%,-80vh);
    }
    100%{
       transform: translate(-50%,0);
    }
}



.img{
	position: absolute;
	width:200px;
	height:200px;
	border-radius: 50%;
	overflow:hidden;
	z-index: 1;
	border-style: solid;
	border-width: 8px;
	border-color: #f1c40f #e74c3c #9b59b6 #2ecc71;
	animation: spin 3s linear infinite;
}
.img img{
	width:100%;
	transform-origin: center;
	animation: spin 3s linear infinite reverse;
	transition: 1s;
	z-index: inherit;
}

#code:hover {
      color:pink;
    }
#code2:hover {
	  color:pink;
	}
.heart{
	position: absolute;
	width:200px;
	height:40vh;
	left:50%;
	top:0;
	transform: translateX(-50%);
	overflow:hidden;
	z-index: 1;
}
#video{
	width:50%;
	height: 100vh;
	position: absolute;
	right:0;
	top:0;
	overflow: hidden;
	z-index: -2;
	user-select: none;
}
/* #bg-video{
	width:100%;
	height: auto;
	font-family: "Anton", sans-serif;
} */
